<#include "/ma/_layout.ftl"> 

<#macro css>
	<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/select2_metro.css" /> 
	<link rel="stylesheet" href="${base}/resources/ma/css/DT_bootstrap.css" />
</#macro>

<!--定义script-->
<#macro script>  
	<!-- BEGIN PAGE LEVEL PLUGINS --> 
	<script type="text/javascript" src="${base}/resources/ma/js/select2.min.js"></script> 
	<script type="text/javascript" src="${base}/resources/ma/js/jquery.dataTables.js"></script> 
	<script type="text/javascript" src="${base}/resources/ma/js/DT_bootstrap.js"></script> 
	<!-- END PAGE LEVEL PLUGINS -->
	<script type="text/javascript" src="${base}/resources/ma/js/table-user.js"></script>  
</#macro> 

<!--定义jQuery(document).ready();方法需要初始化的函数-->
<#macro script_ready>  
	TableEditable.init(); 
</#macro>

<@layout active_id="base" child_active_id="user">      
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">

	<!-- BEGIN PAGE HEADER-->

	<div class="row-fluid">

		<div class="span12">

			<!-- BEGIN STYLE CUSTOMIZER -->

			<div class="color-panel hidden-phone">

				<div class="color-mode-icons icon-color"></div>

				<div class="color-mode-icons icon-color-close"></div>

				<div class="color-mode">

					<p>THEME COLOR</p>

					<ul class="inline">

						<li class="color-black current color-default" data-style="default"></li>

						<li class="color-blue" data-style="blue"></li>

						<li class="color-brown" data-style="brown"></li>

						<li class="color-purple" data-style="purple"></li>

						<li class="color-grey" data-style="grey"></li>

						<li class="color-white color-light" data-style="light"></li>

					</ul>

					<label>

						<span>Layout</span>

						<select class="layout-option m-wrap small">

							<option value="fluid" selected>Fluid</option>

							<option value="boxed">Boxed</option>

						</select>

					</label>

					<label>

						<span>Header</span>

						<select class="header-option m-wrap small">

							<option value="fixed" selected>Fixed</option>

							<option value="default">Default</option>

						</select>

					</label>

					<label>

						<span>Sidebar</span>

						<select class="sidebar-option m-wrap small">

							<option value="fixed">Fixed</option>

							<option value="default" selected>Default</option>

						</select>

					</label>

					<label>

						<span>Footer</span>

						<select class="footer-option m-wrap small">

							<option value="fixed">Fixed</option>

							<option value="default" selected>Default</option>

						</select>

					</label>

				</div>

			</div>

			<!-- END BEGIN STYLE CUSTOMIZER -->  

			<!-- BEGIN PAGE TITLE & BREADCRUMB-->

			<h3 class="page-title">

				用户管理 <small>用户列表</small>

			</h3>

			<ul class="breadcrumb">

				<li>

					<i class="icon-home"></i>

					<a href="index.html">Home</a> 

					<i class="icon-angle-right"></i>

				</li>

				<li>

					<a href="#">用户管理</a>

					<i class="icon-angle-right"></i>

				</li>

				<li><a href="#">用户列表</a></li>

			</ul>

			<!-- END PAGE TITLE & BREADCRUMB-->

		</div>

	</div>

	<!-- END PAGE HEADER-->

	<!-- BEGIN PAGE CONTENT-->

	<div class="row-fluid">

		<div class="span12">

			<!-- BEGIN EXAMPLE TABLE PORTLET-->

			<div class="portlet box blue">

				<div class="portlet-title">

					<div class="caption"><i class="icon-edit"></i>用户信息列表</div>

					<div class="tools">

						<a href="javascript:;" class="collapse"></a>

						<a href="#portlet-config" data-toggle="modal" class="config"></a>

						<a href="javascript:;" class="reload"></a>

						<a href="javascript:;" class="remove"></a>

					</div>

				</div>

				<div class="portlet-body">

					<div class="clearfix">

						<div class="btn-group">

							<button id="sample_editable_1_new" class="btn green">

							添加 <i class="icon-plus"></i>

							</button>

						</div>

						<div class="btn-group pull-right">

							<button class="btn dropdown-toggle" data-toggle="dropdown">Tools <i class="icon-angle-down"></i>

							</button>

							<ul class="dropdown-menu pull-right">

								<li><a href="#">Print</a></li>

								<li><a href="#">Save as PDF</a></li>

								<li><a href="#">Export to Excel</a></li>

							</ul>

						</div>

					</div>

					<table class="table table-striped table-hover table-bordered" id="sample_editable_1">

						<thead>

							<tr>

								<th>用户名</th>

								<th>姓名</th>

								<th>微信</th>

								<th>备注</th>
								<th>备注1</th>
								<th>备注2</th>
								<th>备注3</th>
								<th>备注4</th>

								<th>编辑</th>

								<th>删除</th>

							</tr>

						</thead>

						<tbody>

							<!-- 显示内容信息-->
	                       <#list page.content as result> 
	                         <tr class="">
								<td>${result.username}</td>
	
								<td>${result.nickname}</td>
	
								<td>${result.wechat}</td>
	
								<td>${result.remark}</td> 
								<td>${result.remark}</td> 
								<td>${result.remark}</td> 
								<td>${result.remark}</td> 
								<td class="center">${result.remark}</td> 
	
								<td><a class="edit" href="javascript:;" id="${result.id}">Edit</a></td>
	
								<td><a class="delete" href="javascript:;" id="${result.id}">Delete</a></td>
							 </tr>
	                        </#list>  
						</tbody>

					</table>

				</div>

			</div>

			<!-- END EXAMPLE TABLE PORTLET-->

		</div>

	</div>

	<!-- END PAGE CONTENT -->

</div>

<!-- END PAGE CONTAINER-->  

</@layout>